/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-04-23 13:31:52
 * @LastEditTime : 2023-07-05 13:56:27
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Admin\PageType\ListPages.jsx
 * @Description  :
 */

import { message, Skeleton } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { useEventEmitter, useRequest, useSessionStorageState, useSize } from 'ahooks'
import { middleware } from '../../../Common/Router/MenuNav/middleware'
import { ModalBox } from '../../../Common/Modal/ModalBox'
import { ExportExcel } from '../../../Common/Configure/QRcode'
import { Http } from '../../../Common/Api'
import dayjs from 'dayjs'

import { ProTableTemplate002 } from './ProTableTemplate'

import { TableNav001, TableNavTree001 } from './TableNav'

const TableNav = { TableNav001, TableNavTree001 }

const ListPages = ({ url, title, uuid }) => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [messageApi, contextHolder] = message.useMessage()
    const tableBox = useRef(null)
    const BoxSize = useSize(tableBox)
    const actionRef = useRef()
    const formRef = useRef()
    const OptionsEvent = useEventEmitter()
    const [configure, setConfigure] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const [TableStatus, setTableStatus] = useState(true)
    const [independenceNav, setIndependenceNav] = useState()
    const [independenceActive, setIndependenceActive] = useState()
    const [independenceExpanded, setIndependenceExpanded] = useState([])

    const { runAsync } = useRequest(Http, { manual: true })

    useEffect(() => {
        const getUrlData = async () => {
            let data = await middleware(url, OptionsEvent, uuid, actionRef)
            if (data) {
                const { independence, independenceSet } = data
                if (independence)
                    runAsync({ url: independenceSet.url, data: independenceSet.data }).then(res => {
                        if (independenceSet.all) res = [{ uuid: '', tableName: '全部' }, ...res]
                        setIndependenceActive(res[0].uuid)
                        setIndependenceNav(res)
                        setTableStatus(false)
                    })
                else setTableStatus(false)
                setConfigure(data)
            } else messageApi.error(`${url} 页面配置参数不存在`)
        }
        if (url && uuid) getUrlData()
    }, [OptionsEvent, messageApi, runAsync, url, uuid])

    OptionsEvent.useSubscription(val => {
        const { type, data } = val
        switch (type) {
            case 'SelectExcel':
                const from = formRef.current.getFieldsValue()
                const prop = Object.keys(from).reduce((result, item) => {
                    if (from[item]) {
                        if (typeof from[item] === 'object')
                            return { ...result, [item]: dayjs(from[item]).format(data.date) }
                        else return { ...result, [item]: from[item] }
                    }
                    return result
                }, {})
                ExportExcel(data.api, prop)
                break
            default:
                setOptionsCall(val)
                break
        }
    })

    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        const { active, expanded } = val
        setIndependenceExpanded(expanded)
        setIndependenceActive(active)
    })

    const ListNav = () => {
        return (
            <div className="ListPagesBoxNav" style={{ '--after': temporaryData.themeColor }}>
                <div className="title"> {configure.independenceSet.title}</div>
                <div className="list">
                    {(() => {
                        const { type } = configure.independenceSet
                        const Template = TableNav[type]
                        return (
                            <Template
                                data={independenceNav}
                                ActiveEvent={ActiveEvent}
                                active={independenceActive}
                                expandedKeys={independenceExpanded}
                            />
                        )
                    })()}
                </div>
            </div>
        )
    }

    return (
        <div className="ListPagesBox" ref={tableBox}>
            {contextHolder}
            {BoxSize && configure && (
                <Skeleton active={true} paragraph={{ rows: 12 }} loading={TableStatus}>
                    {configure.independence && <ListNav />}
                    <ProTableTemplate002
                        BoxSize={BoxSize}
                        actionRef={actionRef}
                        formRef={formRef}
                        title={title}
                        configure={configure}
                        independence={configure.independence}
                        active={independenceActive}
                        ActiveEvent={ActiveEvent}
                    />
                </Skeleton>
            )}
            <ModalBox OptionsCall={OptionsCall} actionRef={actionRef} configure={configure} />
        </div>
    )
}

export default ListPages
